<template>
	<unicloud-db ref="udb" #default="{data, loading, error}" manual
		collection="pet-pets" field="name, header, priority" 
		where="owner_id==$cloudEnv_uid && visibility_status != 2" orderby="priority asc">
		<template v-if="!loading">
			<view v-if="error || !data || data.length === 0">
				<uv-empty icon="https://cdn.uviewui.com/uview/empty/data.png" text="还没有添加宠物"></uv-empty>
			</view>
			<view v-else>
				<l-drag ref="drag" :list="data" grid-height="160rpx" :column="1" ghost handle :touchHandle="touchHandle" @change="onListChanged">
					<template #grid="{active, content}">
						<view class="grid">
							<view class="grid__inner" :class="{active}">
								<uv-image :src="content.header.url" @click.capture="toPetSetting(content)" width="280rpx" height="140rpx" />
								<text class="grid__inner__text uni-ml-4" :class="{'text-active': active}">{{content.name}}</text>
								<uv-icon class="grid__inner__icon" name="list" size="48rpx" color="primary"
									@touchstart="touchHandle = true" @touchend="touchHandle = false"></uv-icon>
							</view>
						</view>
					</template>
					<template #ghost>
						<view class="grid">
							<!-- 幽灵样式 -->
							<view class="grid__inner ghost"></view>
						</view>
					</template>
				</l-drag>
			</view>
		</template>
		<uv-load-more v-else status="loading"></uv-load-more>
	</unicloud-db>
	<uni-fab horizontal="left" vertical="bottom"
		:pattern="{ buttonColor: '#e09ab5' }" :popMenu="false" @fabClick="toCreatePet" />
</template>

<script lang="ts" setup>
	import { ref, nextTick } from 'vue';
	import { Grid } from '../../../uni_modules/lime-drag/components/l-drag/type';
	import { onShow } from '@dcloudio/uni-app';
	const touchHandle = ref(false)
	const udb = ref(null)
	const onListChanged = (list: Grid[]) => {
		list.forEach((item, index) => {
			if (item.content.priority == index) return
			udb.value.update(item.content._id, {
				priority: index
			})
		})
	}
	onShow(() => {
		nextTick(() => {
			udb.value.refresh()
		});
	})
	const toCreatePet = () => {
		uni.navigateTo({
			url: '/pages/user-center/pet-management/create-pet'
		})
	}
	const toPetSetting = (pet: any) => {
		uni.navigateTo({
			url: '/pages/user-center/pet-management/pet-settings?id=' + pet._id
		})
	}
</script>

<style lang="scss" scoped>
	.grid {
		height: 100%;
		width: 100%;
		padding: 10rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		
		&__inner {
			height: 100%;
			width: 100%;
			border: 1rpx solid #eee;
			display: flex;
			align-items: center;
			
			background-color: white;
			color: $uni-primary;
			transition: all 300ms ease;
			position: relative;
			&__text {
				font-weight: bold;
			}
			&__icon {
				position: absolute;
				right: 20rpx;
				top: auto;
			}
		}
	}
	.active {
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.15);
		background-color: $uni-primary;
		color: white;
		border: 0rpx;
		transform: scale(1.08);
	}
	.ghost {
		background-color: mix(#fff,$uni-primary,90%);
		border: 0rpx;
	}
</style>
